<script>
import UploadItem from './components/uploadItem.vue'
import { CvUploadStep1 } from '@/api/table'
import DetailPage from './components/detailPage.vue'

export default {
  components: {
    UploadItem,
    DetailPage
  },
  data() {
    return {
      uploadFileStart: {},
      uploadFileEnd: {},
      resultData: {},
      isShowResultPage: false,
      computedBtnLoading: false,
    }
  },
  computed: {
    changeData() {
      return {
        uploadFileEnd: this.uploadFileEnd,
        uploadFileStart: this.uploadFileStart,
      };
    }
  },
  watch: {
    changeData: {
      deep: true,
      handler(value) {
        if(!value.uploadFileStart.size || !value.uploadFileEnd.size) {
          this.isShowResultPage = false
        }
      }
    }
  },
  methods: {
    // 点击计算
    async computedData() {
      if(!this.uploadFileStart.size || !this.uploadFileEnd.size) {
        return this.$message.error('请上传文件')
      }
      this.computedBtnLoading = true
      const fd = new FormData()
      fd.append('type', 'formData')
      fd.append('excel_sugar', this.uploadFileStart)
      fd.append('excel_water', this.uploadFileEnd)
      try {
        const res = await CvUploadStep1(fd)
        this.resultData = res.data
        this.isShowResultPage = true
      } catch (err) {
        return console.log(err);
      } finally {
        this.computedBtnLoading = false
      }
    },
    handleClear() {
      this.uploadFileStart = {}
      this.uploadFileEnd = {}
      this.resultData = {}
      this.isShowResultPage = false
      this.computedBtnLoading = false
      this.$refs.firstUpload.handleRemove()
      this.$refs.secondUpload.handleRemove()
    }
  }
}
</script>
<template>
  <div class="container">
    <div class="uploadBox">
      <UploadItem 
        ref="firstUpload"
        :title="$t('page.startingPoint')"
        v-model="uploadFileStart"></UploadItem>
      <UploadItem 
        :title="$t('page.End')" 
        v-model="uploadFileEnd"
        ref="secondUpload"
      ></UploadItem>
    </div>
    <el-button 
      class="uploadBtn"
      type="primary"
      :loading="computedBtnLoading"
      v-if="!isShowResultPage"
      @click="computedData"
    >{{$t('page.upload')}}</el-button>
    <DetailPage 
      v-if="isShowResultPage" 
      :computedData="resultData"
      @handleClear="handleClear"
    ></DetailPage>
  </div>
</template>
<style lang='scss' scoped>
.container {
  width: 100%;
  height: 100%;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  // justify-content: center;
  align-items: center;
  padding-top: 100px;
  .uploadBtn {
    width: 180px;
    margin-top: 50px;
  }
  .uploadBox {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>